<template>
    <el-row>
        <!-- 头部 -->
        <el-col :span="24">
            <el-card shadow="hover">
                <el-breadcrumb :separator-icon="ArrowRightBold">
                    <el-breadcrumb-item :to="{ path: '/admin_index' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>游戏配置</el-breadcrumb-item>
                    <el-breadcrumb-item>新澳门28</el-breadcrumb-item>
                </el-breadcrumb>
            </el-card>
        </el-col>
        <div style="padding: 5px;"></div>
        <!-- 内容区域 -->
        <el-col :span="24">
            <el-card shadow="hover">
                <template #header>
                    <div style="display: flex; align-items: center;">
                        <el-button type="primary" @click="roomDialog = true">添加房间</el-button>
                    </div>
                </template>

                <!-- 表格 -->
                <el-table :data="tableData.list" :border="true" style="width: 100%">
                    <el-table-column prop="room_sort" label="排序" width="60" />
                    <el-table-column prop="room_name" label="房间标题" />
                    <el-table-column prop="room_money" label="房间限额" />

                    <el-table-column label="房间图片">
                        <template #default="scope">
                            <img style="width: 100px; height: 30px;" :src="scope.row.room_imgurl" />
                        </template>
                    </el-table-column>


                    <el-table-column label="房间状态">
                        <template #default="scope">

                            <el-tooltip :content="scope.row.status == 1 ? '房间开启' : '房间关闭'" placement="top">
                                <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
                                    @change="adminAozhouConfigStatus(scope.row.id, scope.row.status)"></el-switch>
                            </el-tooltip>

                        </template>
                    </el-table-column>

                    <el-table-column prop="createtime" label="创建时间" />

                    <el-table-column label="操作操作" width="460">
                        <template #default="scope">
                            <el-popconfirm title="确定删除房间?" @confirm="adminAozhouConfigDelete(scope.row.id)">
                                <template #reference>
                                    <el-button type="danger" :icon="Delete">删除房间
                                    </el-button>
                                </template>
                            </el-popconfirm>
                            <el-button type="success" :icon="Edit"
                                @click="adminAozhouConfigUpdate(scope.row)">编辑房间</el-button>
                            <el-button type="primary" :icon="Setting"
                                @click="settingAozhouOdds(scope.row)">设置赔率</el-button>
                        </template>
                    </el-table-column>

                </el-table>
                <!-- 分页 -->
                <div style="padding: 10px;"></div>

                <el-pagination small background layout=" prev, pager, next, jumper" :total="1" />

            </el-card>
        </el-col>
    </el-row>


    <!-- 添加管理员 -->
    <el-dialog v-model="roomDialog" title="添加房间卡" center width="38%" @close="roomhandleClose">
        <el-form label-width="80px">
            <el-form-item label="房间名称">
                <el-input type="text" v-model="formData.room_name" placeholder="列如：标准厅" />
            </el-form-item>
            <el-form-item label="房间图片">
                <el-input type="text" v-model="formData.room_imgurl" disabled placeholder="图片尺寸要求：670*275px">
                    <template #append>
                        <el-button @click="roomImageUpload()">请选择图片上传</el-button>
                    </template>
                </el-input>

                <div style="display: flex; flex-direction: column; position: relative;">
                    <div v-if="formData.room_imgurl"
                        style="width: 200px; height: 82px; border: solid 1px #e6e6e6; margin-top: 5px;">
                        <img style="width: 200px; height: 82px;" :src="imageUrl" />
                    </div>

                    <div v-if="formData.room_imgurl"
                        style="width: 20px; height: 20px; position: absolute; top: 5px; right: -20px;"
                        @click="formData.room_imgurl = ''">
                        <svg t="1678712155966" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="4668" width="20" height="20">
                            <path
                                d="M512 960c-247.039484 0-448-200.960516-448-448S264.960516 64 512 64 960 264.960516 960 512 759.039484 960 512 960zM512 128.287273c-211.584464 0-383.712727 172.128262-383.712727 383.712727 0 211.551781 172.128262 383.712727 383.712727 383.712727 211.551781 0 383.712727-172.159226 383.712727-383.712727C895.712727 300.415536 723.551781 128.287273 512 128.287273z"
                                fill="#d81e06" p-id="4669"></path>
                            <path
                                d="M557.05545 513.376159l138.367639-136.864185c12.576374-12.416396 12.672705-32.671738 0.25631-45.248112s-32.704421-12.672705-45.248112-0.25631l-138.560301 137.024163-136.447897-136.864185c-12.512727-12.512727-32.735385-12.576374-45.248112-0.063647-12.512727 12.480043-12.54369 32.735385-0.063647 45.248112l136.255235 136.671523-137.376804 135.904314c-12.576374 12.447359-12.672705 32.671738-0.25631 45.248112 6.271845 6.335493 14.496116 9.504099 22.751351 9.504099 8.12794 0 16.25588-3.103239 22.496761-9.247789l137.567746-136.064292 138.687596 139.136568c6.240882 6.271845 14.432469 9.407768 22.65674 9.407768 8.191587 0 16.352211-3.135923 22.591372-9.34412 12.512727-12.480043 12.54369-32.704421 0.063647-45.248112L557.05545 513.376159z"
                                fill="#d81e06" p-id="4670"></path>
                        </svg>
                    </div>
                </div>

            </el-form-item>
            <el-form-item label="房间限额">
                <el-input type="number" v-model="formData.room_money" placeholder="进入房间余额要求 ：列如 1000" />
            </el-form-item>
            <el-form-item label="房间排序">
                <el-input type="number" v-model="formData.room_sort" placeholder="房间排序 由小到大展示 1-99" />
            </el-form-item>

        </el-form>
        <template #footer>
            <el-button type="danger" @click="roomDialog = false">取消保存</el-button>
            <el-button type="primary" @click="SubmitFormData">保存提交</el-button>
        </template>
    </el-dialog>

    <!-- 菜单权限管理 -->
    <el-dialog v-model="oddsDialog" title="房间赔率设置" center width="50%" @close="roomhandleCloses1">

        <!-- 猜和值 -->
        <el-card shadow="hover">
            <template #header>
                <div style="color: blue; font-size: 16px; font-weight: 700;">
                    新澳门28 <span style="color: red;font-size: 20px;font-weight: 700;">猜和值</span> 设置
                </div>
            </template>
            <el-form label-width="100px" label-position="top">
                <el-form-item label="猜和值赔率">
                    <div style="display: flex;flex-direction:row; flex-wrap: wrap; align-items: center;">
                        <div style="width: 150px; margin-right: 10px; margin-top: 10px;"
                            v-for="(item) in gameData.caihezhi.list">
                            <el-input type="number" v-model="item.odds">
                                <template #prepend>{{ item.number }}</template>
                            </el-input>
                        </div>
                    </div>
                </el-form-item>

                <el-form-item label="最小下注限额">
                    <el-input type="number" v-model="gameData.caihezhi.money_min"></el-input>
                </el-form-item>

                <el-form-item label="最大下注限额">
                    <el-input type="number" v-model="gameData.caihezhi.money_max"></el-input>
                </el-form-item>
                <el-form-item label="本期用户最大下注限额">
                    <el-input type="number" v-model="gameData.caihezhi.this_money_max"></el-input>
                </el-form-item>

            </el-form>
        </el-card>


        <!-- 猜组合 -->
        <div style="height: 20px;"></div>
        <el-card shadow="hover">
            <template #header>
                <div style="color: blue; font-size: 16px; font-weight: 700;">
                    新澳门28 <span style="color: red;font-size: 20px;font-weight: 700;">猜组合</span> 设置
                </div>
            </template>
            <el-form label-width="100px" label-position="top">
                <el-form-item label="大小单双赔率">
                    <div style="display: flex;flex-direction:row; flex-wrap: wrap; align-items: center;">
                        <div style="width: 200px; margin-right: 10px; margin-top: 10px;"
                            v-for="(item) in gameData.caizuhe.list">
                            <el-input type="number" v-model="item.odds">
                                <template #prepend>{{ item.number }}</template>
                            </el-input>
                        </div>
                    </div>
                </el-form-item>

                <el-form-item label="最小下注限额">
                    <el-input type="number" v-model="gameData.caizuhe.money_min"></el-input>
                </el-form-item>

                <el-form-item label="最大下注限额">
                    <el-input type="number" v-model="gameData.caizuhe.money_max"></el-input>
                </el-form-item>

                <el-form-item label="本期用户最大下注限额">
                    <el-input type="number" v-model="gameData.caizuhe.this_money_max"></el-input>
                </el-form-item>
            </el-form>
        </el-card>


        <!-- 猜极值 -->
        <div style="height: 20px;"></div>
        <el-card shadow="hover">
            <template #header>
                <div style="color: blue; font-size: 16px; font-weight: 700;">
                    新澳门28 <span style="color: red;font-size: 20px;font-weight: 700;">猜极值</span> 设置
                </div>
            </template>
            <el-form label-width="100px" label-position="top">
                <el-form-item label="极大极小赔率">
                    <div style="display: flex;flex-direction:row; flex-wrap: wrap; align-items: center;">
                        <div style="width: 200px; margin-right: 10px; margin-top: 10px;"
                            v-for="(item) in gameData.caijizhi.list">
                            <el-input type="number" v-model="item.odds">
                                <template #prepend>{{ item.number }}</template>
                            </el-input>
                        </div>
                    </div>
                </el-form-item>

                <el-form-item label="最小下注限额">
                    <el-input type="number" v-model="gameData.caijizhi.money_min"></el-input>
                </el-form-item>

                <el-form-item label="最大下注限额">
                    <el-input type="number" v-model="gameData.caijizhi.money_max"></el-input>
                </el-form-item>

                <el-form-item label="本期用户最大下注限额">
                    <el-input type="number" v-model="gameData.caijizhi.this_money_max"></el-input>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 猜类型 -->
        <div style="height: 20px;"></div>
        <el-card shadow="hover">
            <template #header>
                <div style="color: blue; font-size: 16px; font-weight: 700;">
                    新澳门28 <span style="color: red;font-size: 20px;font-weight: 700;">猜组合</span> 设置
                </div>
            </template>
            <el-form label-width="100px" label-position="top">
                <el-form-item label="大小单双赔率">
                    <div style="display: flex;flex-direction:row; flex-wrap: wrap; align-items: center;">
                        <div style="width: 200px; margin-right: 10px; margin-top: 10px;"
                            v-for="(item) in gameData.caileixing.list">
                            <el-input type="number" v-model="item.odds">
                                <template #prepend>{{ item.number }}</template>
                            </el-input>
                        </div>
                    </div>
                </el-form-item>

                <el-form-item label="最小下注限额">
                    <el-input type="number" v-model="gameData.caileixing.money_min"></el-input>
                </el-form-item>

                <el-form-item label="最大下注限额">
                    <el-input type="number" v-model="gameData.caileixing.money_max"></el-input>
                </el-form-item>

                <el-form-item label="本期用户最大下注限额">
                    <el-input type="number" v-model="gameData.caileixing.this_money_max"></el-input>
                </el-form-item>
            </el-form>
        </el-card>



        <!-- 特殊赔率配置 -->
        <div style="height: 20px;"></div>
        <el-card shadow="hover">
            <template #header>
                <div style="color: blue; font-size: 16px; font-weight: 700;">
                    新澳门28 <span style="color: red;font-size: 20px;font-weight: 700;">特殊赔率13和14</span> 设置
                </div>
            </template>
            <el-form label-width="100px" label-position="top">
                <el-form-item label="特殊赔率13和14">
                    <div style="display: flex;flex-direction:row; flex-wrap: wrap; align-items: center;">
                        <div style="width: 250px; margin-right: 10px; margin-top: 10px;"
                            v-for="(item) in gameData.tspl.list">
                            <el-input type="number" v-model="item.odds">
                                <template #prepend>{{ item.number }}</template>
                            </el-input>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
        </el-card>

        <template #footer>
            <el-button type="danger" @click="oddsDialog = false">取消保存</el-button>
            <el-button type="primary" @click="SubmitsettingAozhouOdds()">保存提交</el-button>
        </template>
    </el-dialog>

    <!-- 菜单权限管理 -->
</template>

<script setup>

import { ref, reactive, onMounted, inject, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router';
import { request_post } from '@/common/axios/request.js'
import { success, error } from '@/common/tool/message.js'
import { ArrowRightBold, Edit, Delete, Search, Setting } from '@element-plus/icons-vue'
const { proxy } = getCurrentInstance();
// proxy.$httpUrl
const router = useRouter()
const oddsDialog = ref(false)
const roomDialog = ref(false)
const imageModel = inject('showImageModel')
const imageUrl = ref(inject('imageUrl'))
const tableData = reactive({ list: [] })

const gameData = reactive({
    caihezhi: {
        name: '猜和值',
        money_min: 10,
        money_max: 50000,
        this_money_max: 50000,
        list: [
            {
                number: 0,
                odds: null
            },
            {
                number: 1,
                odds: null
            },
            {
                number: 2,
                odds: null
            },
            {
                number: 3,
                odds: null
            },
            {
                number: 4,
                odds: null
            },
            {
                number: 5,
                odds: null
            },
            {
                number: 6,
                odds: null
            },
            {
                number: 7,
                odds: null
            },
            {
                number: 8,
                odds: null
            },
            {
                number: 9,
                odds: null
            },
            {
                number: 10,
                odds: null
            },
            {
                number: 11,
                odds: null
            },
            {
                number: 12,
                odds: null
            },
            {
                number: 13,
                odds: null
            },
            {
                number: 14,
                odds: null
            },
            {
                number: 15,
                odds: null
            },
            {
                number: 16,
                odds: null
            },
            {
                number: 17,
                odds: null
            },
            {
                number: 18,
                odds: null
            },
            {
                number: 19,
                odds: null
            },
            {
                number: 20,
                odds: null
            },
            {
                number: 21,
                odds: null
            },
            {
                number: 22,
                odds: null
            },
            {
                number: 23,
                odds: null
            },
            {
                number: 24,
                odds: null
            },
            {
                number: 25,
                odds: null
            },
            {
                number: 26,
                odds: null
            },
            {
                number: 27,
                odds: null
            },

        ]
    },
    caijizhi: {
        name: '猜极值',
        money_min: 10,
        money_max: 50000,
        this_money_max: 50000,
        list: [
            {
                number: '极大',
                odds: null
            },
            {
                number: '极小',
                odds: null
            },
        ]
    },
    caizuhe: {
        name: '猜组合',
        money_min: 10,
        money_max: 50000,
        this_money_max: 50000,
        list: [
            {
                number: '大',
                odds: null
            },
            {
                number: '小',
                odds: null
            },
            {
                number: '单',
                odds: null
            },
            {
                number: '双',
                odds: null
            },
            {
                number: '大单',
                odds: null
            },
            {
                number: '小单',
                odds: null
            },
            {
                number: '大双',
                odds: null
            },
            {
                number: '小双',
                odds: null
            },
        ]
    },
    caileixing: {
        name: '猜类型',
        money_min: 10,
        money_max: 50000,
        this_money_max: 50000,
        list: [
            {
                number: '豹子',
                odds: null
            },
            {
                number: '顺子',
                odds: null
            },
            {
                number: '对子',
                odds: null
            },
        ]
    },
    tspl: {
        name: '特殊赔率',
        list: [
            {
                number: '大',
                odds: null
            },
            {
                number: '小',
                odds: null
            },
            {
                number: '单',
                odds: null
            },
            {
                number: '双',
                odds: null
            },
            {
                number: '小单',
                odds: null
            },
            {
                number: '大双',
                odds: null
            },
        ]
    }
})

const formData = reactive({
    id: null,
    room_sort: '',
    room_name: '',
    room_money: '',
    room_imgurl: '',
    room_odds: {}
})

onMounted(() => {
    adminAozhouConfigIndex()
})


function SubmitFormData() {
    adminAozhouConfigCreate()
}

// 获取配置
function adminAozhouConfigIndex() {

    request_post('admin_aozhou_config_index').then(res => {
        // console.log(res)
        if (res.data.code == 200) {
            tableData.list = res.data.data
        } else {
            return error(res.data.msg)
        }
    })
}


// 添加配置
function adminAozhouConfigCreate() {

    request_post('admin_aozhou_config_create', formData).then(res => {
        console.log(res)
        if (res.data.code == 200) {
            roomDialog.value = false
            adminAozhouConfigIndex()
            return success(res.data.msg)
        } else {
            return error(res.data.msg)
        }
    })
}

// 删除配置
function adminAozhouConfigDelete(id) {

    request_post('admin_aozhou_config_delete', { id: id }).then(res => {
        if (res.data.code == 200) {
            adminAozhouConfigIndex()
            return success(res.data.msg)
        } else {
            return error(res.data.msg)
        }
    })
}

// 修改状态
function adminAozhouConfigStatus(id, status) {

    request_post('admin_aozhou_config_status', { id, status }).then(res => {
        if (res.data.code == 200) {
            adminAozhouConfigIndex()
            return success(res.data.msg)
        } else {
            return error(res.data.msg)
        }
    })
}



// 修改房间状态
function adminAozhouConfigUpdate(item) {

    formData.id = item.id
    imageUrl.value = item.room_imgurl
    formData.room_name = item.room_name
    formData.room_sort = item.room_sort
    formData.room_money = item.room_money
    formData.room_imgurl = item.room_imgurl
    roomDialog.value = true

}


// 设置赔率
function settingAozhouOdds(item) {

    formData.id = item.id
    if (item.room_odds) {
        gameData.caihezhi = item.room_odds.caihezhi
        gameData.caijizhi = item.room_odds.caijizhi
        gameData.caizuhe = item.room_odds.caizuhe
        gameData.caileixing = item.room_odds.caileixing
        gameData.tspl = item.room_odds.tspl
    }
    oddsDialog.value = true
}

// 提交房间赔率
function SubmitsettingAozhouOdds() {
    formData.room_odds = gameData
    adminAozhouConfigCreate()
    oddsDialog.value = false
}

// 关闭
function roomhandleClose() {

    formData.id = null
    formData.room_sort = ''
    formData.room_name = ''
    formData.room_money = ''
    formData.room_imgurl = ''

}

function roomhandleCloses1() {
    formData.id = null
    setTimeout(() => {
        router.go()
    }, 200);
    // clearTimeout(timer);
}

// 图片上传
function roomImageUpload() {
    imageModel()
    formData.room_imgurl = imageUrl
}

</script>

<style></style>
